<template>
	<view class="page">
		<view class="page-top" :class="$store.getters.token || userInfo.uid?'':'not-login'">
			<view class="search-box">
				<image class="search-icon" src="../../static/images/icon-search.png" mode=""></image>
				<view class="search-inp">
					<input type="text" v-model="query.title" confirm-type="search" @confirm="handleSearch" placeholder="请输入活动名称">
				</view>
			</view>
			<block v-if="$store.getters.token || userInfo.uid">
				<view class="user-box">
					<view class="user-photo">
						<image :src="userInfo.avatar" mode=""></image>
					</view>
					<view class="user-msg">
						<view class="user-name">
							<text>{{userInfo.nickname}}</text> 
							<view class="user-level" v-if="userInfo.level>0">
								{{userInfo.vipName}}
							</view>
						</view>
						<view class="user-detail" v-if="userInfo.vip">
							到期时间：{{userInfo.endTime}} <br/>
							会员证号：YCB-{{userInfo.uid}} <br/>
							所属机构：{{userInfo.arvoAss.aname}}
							<!-- <view class="dis-flex">
								<view class="flex-lab">所属机构：</view>
								<view class="flex-val">
									{{userInfo.arvoAss.aname}}
								</view>
							</view> -->
						</view>
						<view class="user-detail" v-else>
							游客
						</view>
					</view>
				</view>
				
				<!-- <view class="notice-box">
					<view class="notice-hd">
						消息通知
					</view>
					<view class="notice-con">
						某某某获得一个协会荣誉
					</view>
					<view class="notice-time">
						刚刚
					</view>
					<view class="link-arrow">
						<image src="../../static/images/icon-arrow.png" mode=""></image>
					</view>
				</view> -->
			</block>
		</view>
		<view class="page-con">
			<!-- <swiper class="swiper" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item" style="background:#808080">
						<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F3%2F59914c437c099.jpg%3Fdown&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668734495&t=b991b616aaa553ed856e485bffdde9fc" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item" style="background:orange">
						<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-08-24%2F5f43360e8a85e.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668734495&t=b8626b3e4202e55ad8559a755b4ea5bf" mode=""></image>
					</view>
				</swiper-item>
			</swiper> -->
			<view class="activity-list">
				<view class="item" v-for="item in list" :key="item.id" @click="toDetail(item.id)">
					<view class="item-pic">
						<image :src="item.eimg" mode=""></image>
					</view>
					<view class="item-main">
						<view class="item-title">
							{{item.title}}
						</view>
						<view class="item-con">
							{{item.introduce}}
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import {getIndexData} from '@/api/xiehui'
	export default{
		data(){
			return {
				query:{
					title:'',
					limit:100,
					page:1,
				},
				list:[],
			}
		},
		onLoad(){
			
		},
		onShow(){
			this.getActivityData();
		},
		onPullDownRefresh(){
			console.log("下拉刷新");
			this.query.page=1;
			this.query.title='';
			this.getActivityData();
			uni.stopPullDownRefresh(); 
		},
		computed: mapGetters(['userInfo']),
		methods:{
			handleSearch(e){
				console.log(e);
				this.getActivityData();
			},
			toDetail(id){
				uni.navigateTo({
					url:'/pages/activeCenter/detail?id='+id
				})
			},
			getActivityData(){
				uni.showLoading({
					title:'加载中...'
				})
				getIndexData(this.query).then((res)=>{
					this.list=res.data;
					uni.hideLoading();
				}).catch(()=>{
					
				})
			},
		},
	}
</script>

<style>
	page{
		color: #171717;
	}
	image{
		width: 100%;
		height: 100%;
	}
	.page-top{
		padding: 30rpx;
		background: linear-gradient(180deg, #E4F0FF 0%, #F6F6F6 100%);
	}
	.page-top.not-login{
		height: auto;
		padding-bottom: 0;
	}
	.search-box{
		height: 60rpx;
		display: flex;
		align-items: center;
		background: #fff;
		padding: 0 26rpx;
		border-radius: 50rpx;
	}
	.search-box .search-icon{
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}
	.search-box .search-inp{
		flex: 1;
	}
	.search-box .search-inp input{
		font-size: 24rpx;
	}
	
	.user-box{
		display: flex;
		margin-top: 46rpx;
	}
	.user-box .user-photo{
		width: 160rpx;
		height: 160rpx;
		margin-right: 32rpx;
		border-radius: 50%;
		background: #ddd;
		overflow: hidden;
	}
	.user-box .user-msg{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.user-box .user-msg .user-name{
		display: flex;
		align-items: center;
		font-size: 36rpx;
	}
	.user-box .user-msg .user-name text{
		font-weight: bold;
	}
	.user-box .user-msg .user-level{
		width: 115rpx;
		height: 38rpx;
		margin-left: 18rpx;
		line-height: 38rpx;
		text-align: center;
		background: linear-gradient(90deg,#FFE8C9,#ECBD7F);
		font-size: 22rpx;
		color: #A76C1D;
	}
	.user-box .user-msg .user-detail{
		margin-top: 32rpx;
		color: #868D93;
		font-size: 28rpx;
		line-height: 40rpx;
	}
	.dis-flex{
		display: flex;
	}
	.dis-flex .flex-lab{
		width: 148rpx;
		flex-shrink: 0;
	}
	
	.notice-box{
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		height: 76rpx;
		padding: 0 32rpx;
		background: #FFFFFF;
		box-shadow: 0px 8rpx 8rpx 0rpx rgba(202,204,205,0.2);
		border-radius: 50rpx;
		font-size: 26rpx;
	}
	.notice-box .notice-hd{
		position: relative;
		width: 104rpx;
		padding-right: 18rpx;
		box-sizing: content-box;
		font-weight: bold;
	}
	.notice-box .notice-hd::after{
		content: '';
		position: absolute;
		right: 0;
		top: 6rpx;
		height: 28rpx;
		border-right: solid 1px #CECCCF;
		
	}
	.notice-box .notice-con{
		padding-left: 18rpx;
		flex: 1;
	}
	.notice-box .notice-time{
		color: #868D93;
	}
	.notice-box .link-arrow{
		margin-left: 26rpx;
		width: 11rpx;
		height: 23rpx;
		display: flex;
	}
	.swiper{
		height: 354rpx;
		border-radius: 24rpx;
		overflow: hidden;
	}
	.swiper .swiper-item{
		height: 100%;
	}
	.page-con{
		padding: 30rpx;
		padding-bottom: calc(var(--window-bottom) + 20px);
	}
	.activity-list{
		
	}
	
	.activity-list .item{
		margin-top: 20rpx;
		padding: 32rpx 30rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		display: flex;
	}
	.activity-list .item .item-main{
		flex: 1;
	}
	.activity-list .item .item-pic{
		width: 200rpx;
		height: 200rpx;
		flex-shrink: 0;
		margin-right: 24rpx;
		overflow: hidden;
		background-color: #ddd;
	}
	.activity-list .item .item-title{
		font-size: 32rpx;
		font-weight: bold;
	}
	.activity-list .item .item-tag{
		width: 78rpx;
		height: 38rpx;
		    flex-shrink: 0;
		background: #CBE3FF;
		border-radius: 10rpx;
		color: #0F7CFF;
		font-size: 22rpx;
		margin-left: 12rpx;
		text-align: center;
		line-height: 38rpx;
	}
	.activity-list .item .item-con{
		margin-top: 20rpx;
		font-size: 28rpx;
	}
	
	
</style>